<template>
  <view class="product">
    <view class="section">
      <view class="list">
        <view class="item uni-mb-5" v-for="(productItem, productIdx) in products" :key="productIdx">
          <image class="left" style="width: 80px; height: 100px;" :src="productItem.thumbCover"></image>
          <view class="right">
            <view class="top">
              <view class="title uni-mb-5">
                <text>{{ productItem.name }}</text>
              </view>
              <view class="spec">
                <text>{{  productItem.spec }}</text>
              </view>
            </view>
            <view class="bottom">
              <view class="price">
                <text class="number">￥{{ productItem.price }}</text>
                <text class="count">x {{productItem.count}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script setup lang="ts">
import {ProductItemBriefCls} from "@/types/productcls";

defineProps({
  products: Array<ProductItemBriefCls>
})
</script>
<style lang="scss">
.product {
  background-color: #fff;
  padding: 10px 20px;
  .section {
    .list {
      .item {
        display: flex;
        justify-content: space-between;
        .left {
          width: 30%;
        }
        .right {
          width: 70%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .top {
            .title, .spec {
              display: -webkit-box; /* 必须指定为 box */
              -webkit-box-orient: vertical; /* 设置垂直布局 */
              overflow: hidden;
              text-overflow: ellipsis;
              -webkit-line-clamp: 1; /* 限制为两行 */
            }
            .title {
              font-size: 14px;
            }
            .spec {
              font-size: 12px;
              color: $uni-text-color-grey;
            }
          }
          .bottom {
            .price {
              display: flex;
              justify-content: space-between;
              .number {
                color: $uni-color-error;
              }
              .count {
                color: $uni-text-color-grey;
              }
            }
          }
        }
      }
    }
  }
}
</style>